﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-container>
        <el-header style="display:flex;align-content:space-between;">
            <div style="width:300px;height:100%;text-align:start;" >
                <span style="color:azure;font-size:25px;">
                    @ViewBag.InsName
                </span>
            </div>
            <el-dropdown v-on:command="handleCommand" style="margin-left:auto">
                <span class="el-dropdown-link">
                    @ViewBag.Name<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
<el-container>
    <el-aside width="300px">
        <el-tree :data="modules" :props="defaultProps" node-key="id" default-expand-all>
            <span class="custom-tree-node" slot-scope="{ node, data }" v-on:click="()=>nodeClicked(data)">
                <i :class="data.icon"></i>
                <a>
                    <cite>{{ node.label }}</cite>
                </a>
            </span>
        </el-tree>
    </el-aside>
    <el-main>
        <el-tabs v-model="editableTabsValue" type="card" closable v-on:tab-remove="removeTab">
            <el-tab-pane v-for="(item, index) in editableTabs"
                         :key="item.name"
                         :label="item.title"
                         :name="item.name">
                <iframe :src="item.url"></iframe>
            </el-tab-pane>
        </el-tabs>
    </el-main>
</el-container>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            editableTabsValue: '2',
            // tab集合
            editableTabs: [
                {
                    title: 'Tab 1',
                    name: '1',
                    url: ''
                }
            ],
            selectedTabIndex: 2,
            modules: [
                {
                    name: '模块1',
                    url: '/account/index',
                    icon: 'el-icon-edit',
                    id: 1,
                    class: 'node-normal'
                },
                {
                    name: '模块2',
                    url: '/acount/index2',
                    icon: 'el-icon-edit',
                    id: 2,
                    class: 'node-normal',
                    children: [
                        {
                            name: '模块3',
                            url: '/account/index3',
                            icon: 'el-icon-edit',
                            id: 3,
                            className: 'node-normal'
                        },
                        {
                            name: '模块4',
                            url: '/account/index4',
                            icon: 'el-icon-edit',
                            id: 4,
                            class: 'node-normal'
                        }
                    ]
                }
            ],
            // 模块对象和tree-node对象的映射
            defaultProps: {
                label: 'name',
                children: 'children'
            }
        },
        methods: {
            //加载用户模块
            loadModules() {
                let that = this;
                axios.get('/api/home/get-user-modules')
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.modules = res.data.data;
                        }
                        else {
                            that.$message.error(res.data.msg);
                        }
                    })
            },
            // 添加tab
            addtab(targetname) {
                let newtabname = ++this.tabindex + '';
                this.editabletabs.push({
                    title: 'new tab',
                    name: newtabname,
                    content: '<iframe :src="item.url"></iframe>'
                });
                this.editabletabsvalue = newtabname;
            },
            // 移除tab
            removeTab(targetname) {
                let that = this;
                let tabs = that.editableTabs;
                let activename = that.editableTabsValue;
                if (activename === targetname) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetname) {
                            let nexttab = tabs[index + 1] || tabs[index - 1];
                            if (nexttab) {
                                activename = nexttab.name
                            }
                        }
                    })
                }
                this.editableTabsValue = activename;
                this.editableTabs = tabs.filter(tab => tab.name !== targetname);
            },
            // 处理下拉菜单的点击
            handleCommand(command) {
                let that = this;
                if (command === 'logout') {
                    that.logout();
                }
            },
            // 退出登录
            logout() {
                axios.get('/api/account/logout').
                    then((res) => {
                        if (res.data.code === 0) {
                            window.location.href = "/account/login";
                        }
                    })
            },
            nodeClicked(node) {
                let that = this;
                if (!node.isDirectory) {
                    let isInEdting = false;
                    let list = []; // 过滤出已存在tabs中与点击的node相同的
                    if (that.editableTabs.length > 0) {
                        list = that.editableTabs.filter(item => item.name ===String(node.id));
                    }
                    if (list.length === 0) { // 没打开过
                        let obj = {
                            title: node.name,
                            name:String(node.id),
                            url: node.url
                        }
                        that.editableTabs.push(obj);
                        that.editableTabsValue = String(node.id);
                    }
                    else { // 已经打开了
                        that.editableTabsValue =String(node.id);
                    }
                }
            }
        },
        created() {
            let that = this;
            that.editableTabs = [];
            that.loadModules();
        },
        mounted() {

        }
    });
</script>
<style>
    body {
        height: 100%;
        margin: 0px !important;
    }

        body .container {
            height: 100%;
        }

            body .container .pb-3 {
                height: 100%;
            }

                body .container .pb-3 #app {
                    height: 100%;
                }

                    body .container .pb-3 #app .el-container {
                        height: 100%;
                    }

    .el-header, .el-footer {
        background-color: #2F9688;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

        .el-header .el-dropdown {
            color: white;
            font-size: 14px;
            font-weight: 500;
        }

    .el-aside {
        background-color: #20222A;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .menu-item {
        color: red;
    }

    iframe {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: none;
        background-color: #fff;
    }

    .el-tab-pane {
        height: 100% !important;
    }

    .el-tabs__content {
        flex: 1 !important;
    }

    .el-tabs--top {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .el-main {
        line-height: 20px !important;
        padding: 0 !important;
        position: relative !important;
    }

    .el-tabs__item.is-active {
        color: black;
        background-color: #f6f6f6;
    }

    .el-tabs__item:hover {
        color: black;
        cursor: pointer;
        background-color: #f6f6f6;
    }

    .el-tabs__header {
        width: 100% !important;
        z-index: 99;
        background-color: #fff !important;
        box-sizing: border-box;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
        margin-bottom: 0 !important;
    }

    .el-tabs__content {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }



    .el-tabs__item {
        color: #666;
    }

        .el-tabs__item .el-icon-close:hover {
            background-color: #FF5722;
            color: #FFF;
        }

    .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border-radius: 0 !important;
        border-bottom: 1px solid #E4E7ED !important;
    }

    .el-container .el-aside ul {
        padding: 0px;
    }

    .el-tree {
        position: relative;
        cursor: default;
        background: none !important;
        color: #ffffffb3;
    }

    .el-tree-node__content {
        display: flex !important;
        align-items: center !important;
        height: 50px !important;
        cursor: pointer;
        padding-left: 0px !important;
    }


        .el-tree-node__content:hover, .el-upload-list__item:hover {
            background-color: #009688;
            color: white;
        }

    .el-tree-node__children .el-tree-node__content {
        padding-left: 15px !important;
    }

    .el-tree-node:focus > .el-tree-node__content {
        background-color: #009688 !important;
        color: white !important;
    }

    .el-tree-node__content .custom-tree-node {
       height:100%;
       display:flex;
       align-items:center;
       justify-content:flex-start;
       flex:1;
    }

        .el-tree-node__content .custom-tree-node a {
            margin-left: 15px;
            position: relative;
        }

            .el-tree-node__content .custom-tree-node a cite {
                font-style: normal !important;
            }

    .el-tree-node__content > .el-tree-node__expand-icon {
        padding: 6px;
        width: 50px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

</style>